<template>
  <uni-nav-bar title="我的账户" left-icon="left" @clickLeft="redirectTo('index/mine')" :fixed="true" statusBar></uni-nav-bar>
  <environment></environment>
  <!-- 可用账户 -->
  <view class="account">
    <view class="account_title" @click="carexplain('1')">
      <view class="title">
        <text>老板账户</text>
        <text></text>
      </view>
      <uni-icons type="help-filled" size="22" color="#D1D1D1"></uni-icons>
    </view>
    <!-- 可用账户列表 -->
    <AccountList :friendInfor="friendInfor" :pageHeight="pageHeight"></AccountList>
  </view>
  <!-- 我的授权 -->
  <view class="account">
    <view class="account_title">
      <view class="title" @click="carexplain('2')">
        <text>个人账户</text>
        <text style="background-color: linear-gradient(-45deg, #fe9b00, #fcb340)"></text>
      </view>
      <uni-icons type="help-filled" size="22" color="#D1D1D1" @click="carexplain('2')"></uni-icons>
      <view class="account_image" @click="navTo('authorized/addauthor')">
        <uni-icons type="plus-filled" size="42" color="#2979ff"></uni-icons>
      </view>
    </view>
    <!-- 我的授权列表 -->
    <MyAuthorization :accountInfo="accountInfo" :pageHeight="pageHeight"></MyAuthorization>
  </view>
  <!-- 弹出提示框 -->
  <uni-popup ref="popup" type="center" :is-mask-click="false">
    <view class="popups">
      <view>{{ explainAll.title }}</view>
      <view>{{ explainAll.content }}</view>
      <view @click="close()">我知道了</view>
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { carfriendUserInfo } from '@/gql/carAuthorized';
import environment from '@c/pobulic/environment.vue';
import { authorMe } from '@/gql/user';
import { getDriverID } from '@/stores/driverID';
import { navTo, redirectTo } from '@/utils/navigator';
import { showLoading } from '@/utils/prompt';
import AccountList from '@c/authorized/accountList.vue';
import MyAuthorization from '@c/authorized/myAuthorization.vue';
import { onShow } from '@dcloudio/uni-app';
import { toPublish } from '@mqtt';
import type { Ref } from 'vue';
import { ref,onMounted } from 'vue';

const driver_id = getDriverID();
//refs
const friendInfor: Ref<any[]> = ref([]);
const accountInfo: Ref<any[]> = ref([]);
const explainAll = ref({
  title: '',
  content: '',
});
const pageHeight=ref()
const popup = ref(null);
onMounted(() => {
  uni.getSystemInfo({
    success: function(res) {
      pageHeight.value = (res.windowHeight - 200).toString()/2;
    },
  });
});
onShow(() => {
  init();
});
function init() {
  showLoading('加载中');
  const payload = {
    query: carfriendUserInfo,
    variables: { driver_id},
  };
  toPublish('ql/driver/getEmpowerListToMe', payload, (obj: any) => {
    const { data } = obj;
    friendInfor.value = data.empower_list_for_me2;
    accountInfo.value = data.empower_list_to_me;
  });
}
function carexplain(type: string) {
  popup.value.open();
  const payload = {
    query: authorMe,
    variables: {
      code: type === '1' ? 'kyzhjd' : 'wdsqjd',
    },
  };
  toPublish('ql/driver/getMyblock', payload, (obj: any) => {
    const { data } = obj;
    explainAll.value = data.get_myblock;
  });
}
function close() {
  popup.value.close();
}
</script>

<style scoped lang="less">
@import url('../authorized/less/authorizedList.less');
</style>
